<template>
	<view class="disconnectP">
		<u-navbar :custom-back="BackM" :is-back="true" title="掉线设备" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
			</view>
		</u-navbar>
		<view style="background-color: #f3f5f7;padding: 1rem;" class="repairListsP">
			<view class="repairLists" v-for="(item,index) in repairLists" :key="index">
				<view @click="foundationM(item)" class="repairLists-child">
					<view class="repairLists-top">
						<view style="display: flex;align-items: center;">
							<view>设备SN号:<span style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 400;">{{item.sn}}</span></view>
						</view>

						<!-- <view>租借中</view> -->
					</view>

					<view class="repairLists-head">
						<view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                ">
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #333333;
                  ">
								商户名称
							</view>
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								{{item.shopName}}
							</view>
						</view>



						<view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                ">
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #333333;
                  ">
								商户地址
							</view>
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                    width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">
								{{item.address}}
							</view>
						</view>
					</view>
				</view>


				<!-- <view :style="{ display: 'flex',justifyContent: 'center',padding: '0.5rem'}">
                            <view class="repairBtn" >维修完成</view>
                        </view> -->
			</view>

			<view style="margin-top:2rem;">
				<u-empty v-if="repairLists.length==0" text="暂无数据" mode="data"></u-empty>
			</view>
		</view>


	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findLostOnlineTerminal
	} from "../../utils/uniApi";

	import uNavbar from '@/uview-ui/components/u-navbar/u-navbar.vue'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			'u-navbar': uNavbar,
		}
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public repairLists = [{
				mainTitle: "拉卡拉总代理",
			},
			{
				mainTitle: "拉卡拉总代理",
			},
			{
				mainTitle: "拉卡拉总代理",
			},
			{
				mainTitle: "拉卡拉总代理",
			},
		];
		created() {

			uni.showLoading({
				title: '加载中'
			});
			let param = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			}

			findLostOnlineTerminal(param).then((res: any) => {
				console.log(res, '掉线设备')
				this.repairLists = res.data.data
				uni.hideLoading();
			})

		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
		}
		BackM() {
			uni.switchTab({
				url: "./index",
			});
		}

		foundationM(data: any) {

			console.log("data", data);

			let datas = {
				a: data.terminalId,
				b: '掉线设备'
			}

			uni.redirectTo({
				url: `../../pages/item/pedestal/index?data=${JSON.stringify(datas)}`,
			});

		}
	}
</script>

<style lang="scss" scoped>
	.disconnectP {
		background-color: #f3f5f7;
		height: 100vh;
	}


	.repairLists {
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.2rem;
		/* padding: 1rem; */
		/* margin: 1rem; */
	}

	.repairLists-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0.5rem;
		border-bottom: 1px solid #e8e8e8;
	}

	.repairLists-child {
		border-bottom: 1px solid #e5e5e5;
	}

	.repairLists-head {
		padding: 1rem;
	}
</style>
